<template>
  <div class="dashboard-container">
    <div class="box-right">
      <div class="box-content">
        <div class="box-right-title pr">
          <!-- <div class="box-image">
          </div> -->
          <div>概况</div>
        </div>
        <div class="box-guanli pr">
          <div class="box-content1 flex">
            <div>
               <div class="box-title-index">{{list.todayUsers}}</div>
            <div class="box-title-right">今日新增</div>
            </div>
          </div>
           <div class="box-content1 flex">
            <div>
               <div class="box-title-index">{{list.todayUsers}}</div>
            <div class="box-title-right">累计注册</div>
            </div>
          </div>
           <div class="box-content1 flex">
            <div>
               <div class="box-title-index">{{list.entAuth}}</div>
            <div class="box-title-right">在线活跃</div>
            </div>
          </div>
           <div class="box-content1 flex">
            <div>
               <div class="box-title-index">{{list.perAuth}}</div>
            <div class="box-title-right">Android下载量</div>
            </div>
          </div>
           <div class="box-content1 flex">
            <div>
               <div class="box-title-index"></div>
            <div class="box-title-right">iOS下载量</div>
            </div>
          </div>
           <div class="box-content1 flex">
            <div>
               <div class="box-title-index"></div>
            <div class="box-title-right">注销用户</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-overview">
        <div class="wpr">
          <div class="box-content">
            <div class="box-right-title pr">
              <!-- <div class="box-image">
              </div> -->
              <div>常用功能</div>
            </div>
           <div class="flex">
              <div class="pr Common" v-for="(item,index) in list1"
               :key="index">
               <div class="box-right-titlecommon">
              <div class="box-images">
              </div>
              <div>{{item.numberTitle}}</div>
            </div>
            </div>
           </div>
          </div>
        </div>
        <!-- <div class="wh">
          <div class="box-content">
            <div class="box-right-title pr">
              <div class="box-image">
              </div>
              <div>今日待办事项</div>
            </div>
            <div class="box-guanli pr ">
              <div v-for="(item,index) in list2"
                   :key="index"
                   class="">
                <div class="box-title-index">{{item.number}}</div>
                <div class="box-title-right">{{item.numberTitle}}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <!-- <div class="box-overview box-h">
        <div class="wpr">
          <div class="box-content">
            <div class="box-right-title pr">
              <div class="box-image">
              </div>
              <div>用户总览</div>
            </div>
            <div class="box-guanli pr">
              <div v-for="(item,index) in list1"
                   :key="index"
                   class="">
                <div class="box-title-index">{{item.number}}</div>
                <div class="box-title-right">{{item.numberTitle}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="wh">
          <div class="box-content">
            <div class="box-right-title pr">
              <div class="box-image">
              </div>
              <div>今日待办事项</div>
            </div>
            <div class="box-guanli pr ">
                <el-row :gutter="24">
                    <el-col :span="4">
                      <div v-for="(item,index) in list2"
                        :key="index"
                        class="">
                      <div class="box-title-index">{{item.number}}</div>
                      <div class="box-title-right">{{item.numberTitle}}</div>
                    </div>
                    </el-col>
                </el-row>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import  {statistics} from "@/api/user";
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      list:{
        todayUsers: "",
        allUsers: "",
        authUsers:"",
        perAuth:"",
        entAuth:""
      },
      list1: [{
        number: "0",
        numberTitle: "用户列表",
      },
      {
        number: "0",
        numberTitle: "群组管理",
      },
      {
        number: "0",
        numberTitle: "动态管理",
      }, {
        number: "0",
        numberTitle: "意见反馈",
      },
       {
        number: "0",
        numberTitle: "投诉举报",
      },],
      list2: [{
        number: "0",
        numberTitle: "今日新增",
      },
      {
        number: "0",
        numberTitle: "实名审核",
      },
      {
        number: "0",
        numberTitle: "实名审核",
      }]
    }
  },
 created() {
    this.listdata();
  },
  methods:{
      listdata() {
      statistics()
        .then(response => {
          console.log(response)
          this.list.todayUsers=response.data.todayUsers;
          this.list.allUsers=response.data.allUsers;
          this.list.authUsers=response.data.authUsers
          this.list.entAuth=response.data.entAuth
          this.list.entAuth=response.data.entAuth
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    // padding:20px 20px;
    height: 100%;
    margin: 20px 20px 20px 20px;
    border-radius: 12px;
    // background-color: #fff;
    .box-right {
      // height: 100%;
      .box-right-title {
        display: flex;
        padding: 20px 40px;
        justify-content: flex-start;
        align-items: center;
        .box-image {
          width: 20px;
          height: 20px;
          margin-right: 8px;
          background-color: #f0efef;
        }
      }
      .box-content {
        background-color: #fff;
        .box-guanli {
          display: flex;
          justify-content: space-between;
          padding: 20px 40px;
          align-items: center;
          .box-title-index {
            width: 55px;
            height: 50px;
            margin-left: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0efef;
          }
          .box-title-right {
            padding-top: 15px;
          }
        }
      }
      .box-content1{
        width:200px;
        height:145px;
        padding:28px 28px 28px 28px;
        border-radius:10px;
        background-color:#ffffff;
        box-shadow:0px 0px 10px rgb(0 0 0 / 10%);
      }
    }
    .box-overview {
      margin-top: 12px;
      border-radius: 12px;
      display: flex;
    }
    .box-h {
      height: calc(100% - 366px);
    }
    .wh {
      width: 50%;
      background-color: #fff;
    }
    .wpr {
      margin-right: 12px;
      width:100%;
      background-color: #fff;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

  //---------------
  
}
.Common{
    display:flex;
    width:294px;
    background-color:#ffffff;
    margin-left:20px;
    box-shadow:0px 0px 10px rgb(0 0 0 / 10%);
    .box-right-titlecommon {
        display: flex;
        padding: 20px 40px;
        justify-content: flex-start;
        align-items: center;
        .box-images {
          width: 60px;
          height: 60px;
          margin-right: 8px;
          background-color:#f2f2f2;
        }
      }
  }
  .flex{
    display:flex;
  }
</style>
